// import { useEffect, useState } from "react";

// function App() {
//   const [count, setCount] = useState(0);

//   useEffect(() => {
//     setInterval(() => {
//       console.log(count);
//       // setCount(count + 1);
//       setCount((count) => count + 1);
//     }, 1000);
//   }, []);

//   return <div>{count}</div>;
// }

// export default App;
//============
// import { Reducer, useEffect, useReducer } from "react";

// interface Action {
//     type: 'add' | 'minus',
//     num: number
// }

// function reducer(state: number, action: Action) {

//     switch(action.type) {
//         case 'add':
//             return state + action.num
//         case 'minus': 
//             return state - action.num
//     }
//     return state;
// }

// function App() {
//     const [count, dispatch] = useReducer<Reducer<number, Action>>(reducer, 0);

//     useEffect(() => {
//         console.log(count);

//         setInterval(() => {
//             dispatch({ type: 'add', num: 1 })
//         }, 1000);
//     }, []);

//     return <div>{count}</div>;
// }

// export default App;
//===============
// import { useEffect, useState } from 'react';

// function App() {

//     const [count,setCount] = useState(0);

//     useEffect(() => {
//         console.log(count);

//         const timer = setInterval(() => {
//             setCount(count + 1);
//         }, 1000);

//         return () => {
//             clearInterval(timer);
//         }
//     }, [count]);

//     return <div>{count}</div>
// }

// export default App;
//===============
// import { useEffect, useState, useRef, useLayoutEffect } from 'react';

// function App() {
//     const [count, setCount] = useState(0);

//     const updateCount = () => {
//         setCount(count + 1);
//     };
//     const ref = useRef(updateCount);

//     useLayoutEffect(() => {
//         ref.current = updateCount;
//     });

//     useEffect(() => {
//         const timer = setInterval(() => ref.current(), 1000);

//         return () => {
//             clearInterval(timer);
//         }
//     }, []);

//     return <div>{count}</div>;
// }

// export default App;
//================
import { useEffect, useState, useRef, useLayoutEffect, useCallback } from 'react';

function useInterval(fn: Function, time: number) {
    const ref = useRef(fn);

    useLayoutEffect(() => {
        ref.current = fn;
    });

    let cleanUpFnRef = useRef<Function>();
    
    const clean = useCallback(() =>{
        cleanUpFnRef.current?.();
    }, []);

    useEffect(() => {
        const timer = setInterval(() => ref.current(), time);

        cleanUpFnRef.current = ()=> {
            clearInterval(timer);
        }

        return clean;
    }, []);

    return clean;
}

function App() {
    const [count, setCount] = useState(0);

    const updateCount = () => {
        setCount(count + 1);
    };

    useInterval(updateCount, 1000);

    return <div>{count}</div>;
}

export default App;

